<template>
    <div class="drop">
        <van-dropdown-menu>
            <van-dropdown-item disabled title="综合" v-model="value1" />
            <van-dropdown-item title="价格" v-model="value2" @change="Pricechange" :options="option1" />
            <!-- value给值就选中谁 -->
            <van-dropdown-item title="分类" v-model="value3" @change="categorychange" :options="classify" />
        </van-dropdown-menu>
        <Product v-show="isShow" :pruductLi="pruductLi"></Product>
        <van-empty v-show="!isShow" class="custom-image" image="https://img01.yzcdn.cn/vant/empty-image-default.png" description="Description" />
    </div>
</template>

<script>
    import Product from "../components/ProductPage"
    export default {
        name: 'YxDropdown',
        components: { Product },
        props: ["pruductList", "classify"],
        watch: {
            pruductList: {
                handler(val, oldval) {
                    if (val.count != 0) {
                        this.pruductLi = val.data;
                        this.isShow = true;
                    }else{
                        this.isShow = false;
                    }

                },
                deep: true //开始深度监视
            }

        },
        data() {
            return {
                // 产品数据
                pruductLi: [],
                // 分类页
                // classify: [],
                isShow: false,
                value1: 0,
                value2: 'a',
                value3: ' 0',//如果这个的值是那一项value 就表示被勾上
                option1: [
                    { text: '价格从高到低', value: 'desc' },
                    { text: '价格从低到高', value: 'asc' },
                ],
            };
        },
        //挂载 循环数组  checked 为true value3就给value值
        beforeUpdate() {
            this.classify.map(item => {
                if (item.checked) {
                    this.value3 = item.value;
                    return
                }
            })
        },



        methods: {
            categorychange(val) {
                this.$emit('categorychange', val);
            },
            Pricechange(val) {
                this.$emit('Pricechange', val);
            }
        },
    };
</script>

<style lang="scss" scoped>
    .custom-image img {
        border-radius: 100%;
    }
 .drop{
     height: 100%;
     background-color: #ccc;
 }
    /* /deep/ .van-popup {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }

    /deep/ .van-cell {
        margin-top: .2rem;
        display: block;
        width: 2rem;
        text-align: center;
        height: 1rem;
        border: 1px solid #ddd;
    }

    /deep/ .van-cell__title {
        text-align: center;
    } */

</style>
